<template>
  <div>
    <!-- 按钮区 -->
    <div class="toolbar">
      <el-button type="primary" @click="isShow = true">新增</el-button>
    </div>
    <!--表格数据-->
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column
        label="序号"
        type="index"
        width="80"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="username"
        label="用户名"
        width="180"
        header-align="center"
      />
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
        header-align="center"
      />
      <el-table-column
        prop="gender"
        label="性别"
        width="180"
        header-align="center"
      >
        <template #default="{ row }">
          <span v-if="row.gender == 1">男</span>
          <span v-else>女</span>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="手机号" header-align="center" />
      <el-table-column label="操作" header-align="center">
        <el-button type="primary" :icon="Edit" circle title="编辑" />
        <el-button type="danger" :icon="Delete" circle title="删除" />
      </el-table-column>
    </el-table>

    <!-- 新增用户 -->
    <SaveUser :visible="isShow" @close="isShow = false" />
  </div>
</template>
<script setup>
import { ref, onBeforeMount } from "vue";
import { Delete, Edit } from "@element-plus/icons-vue";
import http from "@/utils/http2.js";
import SaveUser from "./SaveUser.vue";
// 表格数据
const tableData = ref([]);
//方法
async function init() {
  const params = {
    page: 1,
    pageSize: 10
  };
  let res = await http.get("/v1/user", params);
  if (res.code == 200) {
    tableData.value = res.data.list;
  }
}
// 生命周期钩子
onBeforeMount(() => {
  init();
});
// 是否显示新增用户
const isShow = ref(false);
</script>
<style scoped>
.toolbar {
  height: 60px;
  line-height: 60px;
  background-color: #fff;
  padding-left: 20px;
}
</style>
